<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <!-- 是页面自适应大小 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>事件绑定</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>

<body>
    <div id="myapp">
        <!-- 用函数或者一条语句绑定dom事件 -->
        <div>点击次数: {{count}}<button @click="++this.count" style="vertical-align:baseline;">点击</button></div>
        <!-- 其实触发dom事件时,不写()会自动把参数envent传入处理函数,可以选择接受,里面包含了很多信息 -->
        <div>点击次数: {{count}}<button @click="myclick" style="vertical-align:baseline;">点击</button></div>
        <!-- 也可以设置自定义参数,但在设置后需显示加上event 并且传入 -->
        <div>点击次数: {{count}}<button @click="myclick($event,2)" style="vertical-align:baseline;">点击</button></div>
        <!-- 多事件处理 巧用一条语句+逗号表达式-->
        <div>点击次数: {{count}}<button @click="add_count(2),log_event($event)" style="vertical-align:baseline;">点击</button>
        </div>
        <br />
        <!-- 当一个事件触发时,时先从外层到内层(捕获阶段),再从内存向外层(冒泡阶段) 默认绑定事件其实是监听的冒泡阶段 -->
        <div @click='click_div("外层")'>
            外层
            <div @click='click_div("中层")'>
                中层
                <div @click='click_div("内层")'>
                    内层
                </div>
            </div>
        </div>
        <!-- 事件修饰符 -->
        <!-- 可以运用修饰符来限定监听,如 -->
        <!-- 使用stop截获事件传递(不再继续传递下/上去) -->
        <br>
        <div @click='click_div("外层")'>
            外层
            <div @click.stop='click_div("中层")'>
                中层
                <div @click='click_div("内层")'>
                    内层
                </div>
            </div>
        </div>
        <br>
        <!-- 使用capture来监听捕获阶段 -->
        <div @click.capture='click_div("外层")'>
            外层
            <!-- 事件修饰符可以串联使用 -->
            <div @click.capture.stop.once='click_div("中层")'>
                中层
                <div @click.capture='click_div("内层")'>
                    内层
                </div>
            </div>
        </div>
        <!-- once 只监听一次 self对象target是当前组件才触发 Prevent 禁止默认行为 passive 允许默认行为 -->
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                count: 0,
            }
        },
        methods: {
            myclick(event, step = 1) {
                console.log(event);
                this.count += step;
            },
            add_count(step = 1) {
                this.count += step;
            },
            log_event(event) {
                console.log(event);
            },
            click_div(message) {
                alert(message);
            },


        }
    };
    let instance = Vue.createApp(app).mount("#myapp");

</script>